<template>
<div class="detail">
	<el-form :model="ruleForm" label-position="top" label-width="100px">
	<div class="order-header">
		<h3><el-input v-model="ruleForm.name" readonly placeholder="请输入方案标题"></el-input></h3>
	</div>
	<div class="order-body">
		<div class="card info" @click="visible = true">
			<ul class="clearfix">
				<li>
					<span>客户名称</span>
					<el-input v-model="ruleForm.customerName" placeholder="请输入客户名称"></el-input>
				</li>
				<li>
					<span>方案设计</span>
					<el-input v-model="userinfo.username" readonly></el-input>
				</li>
				<li>
					<span>方案面积</span>
					<el-input v-model="ruleForm.projectSize" placeholder="请输入方案面积">
						<template slot="append">㎡</template>
					</el-input>
				</li>
				<li>
					<span>制单日期</span>
					<el-input type="text" :value="$init.time(ruleForm.projectDate)" readonly></el-input>
				</li>
				<li>
					<span>客户地址</span>
					<el-input v-model="ruleForm.customerAds" placeholder="请输入客户地址"></el-input>
				</li>
			</ul>
		</div>
		<div class="card" v-for="(obj,index) in data" :key="obj.id">
			<div class="card-header" @click="show(index)" ref="title">
				<i class="el-icon-arrow-right"></i>
				<span>{{obj.name}}</span>
			</div>
			<div class="card-body" ref="data">
				<table class="table">
					<thead>
						<tr>
							<th rowspan="2">#</th>
							<th rowspan="2">名称/品牌</th>
							<th rowspan="2">图片</th>
							<th rowspan="2">功能作用</th>
							<th rowspan="2">单位</th>
							<th rowspan="2">销售价格</th>
							<th colspan="10">对比方案</th>
						</tr>
						<tr>
							<th>数量</th>
							<th>方案1</th>
							<th>数量</th>
							<th>方案2</th>
							<th>数量</th>
							<th>方案3</th>
							<th>数量</th>
							<th>方案4</th>
							<th>数量</th>
							<th>方案5</th>
						</tr>
					</thead>
					<tbody>
					<template v-for="(item,b) in obj.data">
						<tr>
							<td>{{item.a1.num}},{{item.a2.num}},{{item.a3.num}},{{item.a4.num}},{{item.a5.num}}</td>
						</tr>
						<tr :key="b">
							<template
							<template v-else>
							<td>{{b+1}}</td>
							<td width="100">
								<span class="content">{{item.name}}</span>
							</td>
							<td width="80">
								<img :src="`http://101.37.16.149/clientmanage/public/upload/${item.pic}`" 
								alt="" class="thumb" v-img-preview>
							</td>
							<td width="170">
								<span class="content">{{item.content}}</span>
							</td>
							<td>{{item.unit}}</td>
							<td class="price">{{$init.numberFormat(item.sellprice)}}</td>
							<td class="price">
								<input type="number" class="num" v-number-only
								v-model="item.a1.num" @input="f(item,item.a1.num)">
							</td>
							<td class="price">
								{{ item.a1.num !== '' ? $init.numberFormat(item.sellprice * s2n(item.a1.num)) : 0}}
							</td>
							<td class="price">
								<input type="number" class="num" v-number-only
								v-model="item.a2.num" @input="f(item,item.a2.num)">
							</td>
							<td class="price">
								{{ item.a2.num !== '' ? $init.numberFormat(item.sellprice * s2n(item.a2.num)) : 0}}
							</td>
							<td class="price">
								<input type="number" class="num" v-number-only
								v-model="item.a3.num" @input="f(item,item.a3.num)">
							</td>
							<td class="price">
								{{ item.a3.num !== '' ? $init.numberFormat(item.sellprice * s2n(item.a3.num)) : 0}}
							</td>
							<td class="price">
								<input type="number" class="num" 
								v-model="item.a4.num" @input="f(item,item.a4.num)">
							</td>
							<td class="price">
								{{ item.a4.num !== '' ? $init.numberFormat(item.sellprice * s2n(item.a4.num)) : 0}}
							</td>
							<td class="price">
								<input type="number" class="num" 
								v-model="item.a5.num" @input="f(item,item.a5.num)">
							</td>
							<td class="price">
								{{ item.a5.num !== '' ? $init.numberFormat(item.sellprice * s2n(item.a5.num)) : 0}}
							</td>
							<!-- a5 -->
							</template>
						</tr>
					</template>
					</tbody>
				</table>
			</div>
		</div>
		<div class="card">
			<div class="card-header selected">
				<i class="el-icon-arrow-right"></i>
				<span>价格合计</span>
			</div>
			<div class="card-body active">
				<table>
					<thead>
						<tr>
							<th>方案版本号</th>
							<th>方案1</th>
							<th>方案2</th>
							<th>方案3</th>
							<th>方案4</th>
							<th>方案5</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>方案总价合计</td>
							<td>{{$init.numberFormat(temp.a1,2,',','.')}}</td>
							<td>{{$init.numberFormat(temp.a2,2,',','.')}}</td>
							<td>{{$init.numberFormat(temp.a3,2,',','.')}}</td>
							<td>{{$init.numberFormat(temp.a4,2,',','.')}}</td>
							<td>{{$init.numberFormat(temp.a5,2,',','.')}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<div class="order-footer">
		<div class="auth">
			<el-radio-group v-model="ruleForm.radio" size="medium">
				<el-radio-button label="1">自己可见</el-radio-button>
				<el-radio-button label="2">他人可见(可读)</el-radio-button>
				<el-radio-button label="3">他人可见(编辑)</el-radio-button>
			</el-radio-group>
		</div>
		<el-button-group class="btn">
			<el-button @click="close('/')" plain>关闭窗口</el-button>
			<el-button @click="submitForm(ruleForm)" plain>保存方案</el-button>
		</el-button-group>
	</div>
	</el-form>
</div>
</template>

<script>
export default {
	name: 'Home',
	data(){
		return{
			visible: false,
			userinfo: '',
			token: '',
			data: '',
			temp:{a1: 0,a2: 0,a3: 0,a4: 0,a5: 0},
			ruleForm: {
				name: '我是标题',
				customerName: '梵天',
				customerAds: '湖南韶山',
				projectSize: 10,
				radio: '',
				projectDate: this.time(new Date()),
			},
			orderInfo:{},
			template : '',
			loading  : false
		}
	},
	components: {
		
	},
	watch:{
		'data':{
			deep:true,
			handler:function(newV,oldV){}
      	}
	},
	directives: {
        numberOnly: {
            bind: function(el) {
                el.handler = function() {
					el.value = el.value.replace(/\D+/, '');
                }
                el.addEventListener('input', el.handler)
            },
            unbind: function(el) {
                el.removeEventListener('input', el.handler)
            }
        }
    },
	mounted(){
		let data   = this.$storage.localGet('userinfo');
		let id     = this.$route.params.id;
		
		if(data.logincode !== undefined){
			this.userinfo  = data;
			this.getorderdetail(id);
		}else{
			this.$router.push('/login');
		}
	},
	methods:{
		close(url){
			this.$router.push(url);
		},
		// 关闭窗口
		f(input){
			if(input < 0){
				console.log('error');
				this.$message.error('数量不能为负数');
				return
			}else{
				this.totals(this.data);
				this.$forceUpdate();
			}
		},
		// 计算方案
		totals(val){
			let temp = {a1: 0,a2: 0,a3: 0,a4: 0,a5: 0};
			for(let i = 0; i < val.length; i++){
				for(let b = 0;b < val[i].data.length; b++){
					temp.a1 += val[i].data[b].a1.num !== '' ?this.s2n(val[i].data[b].a1.num) * this.s2n(val[i].data[b].sellprice) : 0;
					temp.a2 += val[i].data[b].a2.num !== '' ?this.s2n(val[i].data[b].a2.num) * this.s2n(val[i].data[b].sellprice) : 0;;
					temp.a3 += val[i].data[b].a3.num !== '' ?this.s2n(val[i].data[b].a3.num) * this.s2n(val[i].data[b].sellprice) : 0;;
					temp.a4 += val[i].data[b].a4.num !== '' ?this.s2n(val[i].data[b].a4.num) * this.s2n(val[i].data[b].sellprice) : 0;;
					temp.a5 += val[i].data[b].a5.num !== '' ?this.s2n(val[i].data[b].a5.num) * this.s2n(val[i].data[b].sellprice) : 0;;
				}
			}
			this.temp = temp;
			console.log(this.temp);
		},
		// 方案统计
		s2n(val){
			return parseInt(val);
		},
		// 转换数字
		show(id){
			let _el1 = this.$refs.data[id];
			let _el2 = this.$refs.title[id];
			if (_el1.getAttribute('class') === 'card-body active') {
				_el1.setAttribute('class', 'card-body')
			} else {
				_el1.setAttribute('class', 'card-body active');
			}
			if (_el2.getAttribute('class') === 'card-header selected') {
				_el2.setAttribute('class', 'card-header')
			} else {
				_el2.setAttribute('class', 'card-header selected');
			}
		},
		// 折叠表单
		getorderdetail(id){
			let vm  = this;
			let arr1 = [];
			let arr2 = [];
			vm.total = [];
			vm.$api.init.getorderdetail(vm.userinfo.logincode,id).then(res=> {
				let data = res.data;
				if(data.code == 0){
					vm.data = data;
					vm.orderInfo = data;
					vm.template  = data.templateObj;

					vm.ruleForm = {
						name: data.templateObj.templatename,
						customerName: data.info.shejishi,
						customerAds: data.info.kehudizhi,
						projectSize: data.info.xitongmianji,
						projectDate: data.info.createtime,
						radio: data.info.righttype
					}
					vm.temp = {
						a1: data.info.fangantotal1,
						a2: data.info.fangantotal2,
						a3: data.info.fangantotal3,
						a4: data.info.fangantotal4,
						a5: data.info.fangantotal5
					}
					data = data.moduleProductList;
					for(let i = 0; i < data.length; i++){
						if(data[i].type == 1){
							arr1.push({
								id : data[i].mod_id,
								name: data[i].typename,
								data: []
							})
						}
						if(data[i].type == 2){
							arr2.push(data[i])
						}
					}
					setTimeout(() => {
						for(let b = 0;b < arr2.length; b++){
							arr2[b].a1 ={num: arr2[b].plan_num_1,price: arr2[b].plan_price_1};
							arr2[b].a2 ={num: arr2[b].plan_num_2,price: arr2[b].plan_price_2};
							arr2[b].a3 ={num: arr2[b].plan_num_3,price: arr2[b].plan_price_3};
							arr2[b].a4 ={num: arr2[b].plan_num_4,price: arr2[b].plan_price_4};
							arr2[b].a5 ={num: arr2[b].plan_num_5,price: arr2[b].plan_price_5};

							for(let c = 0; c < arr1.length; c++){
								if(arr2[b].mod_id == arr1[c].id && arr2[b].type == 2){
									arr1[c].data.push(arr2[b]);
								}
							}
						}
					}, 1000);
					vm.data = arr1;
				}else{
					vm.$alert(data.msg, '错误', {
						type: 'error',
						confirmButtonText: '确定',
						callback: action => {
							vm.$router.push('/')
						}
					});
				}
			})
		},
		//获取订单
		saverequest(data){
			let vm = this;
			vm.$api.init.saverequest(vm.userinfo.logincode,data).then(res=> {
				let data = res.data;
				if(data.code == 0){
					vm.$notify({
						message: '恭喜您订单修改成功',
						type: 'success'
					});
					setTimeout(() => {
						this.close('/');	
						vm.loading = false;
					}, 1000);
				}else{
					return this.$message({
						message: '客户名称不能为空',
						type: 'error'
					});
				}
			})
		},
		// 保存数据
		submitForm(form) {
			console.log(form);
			if(form.customerName == ''){
				return this.$message({
					message: '方案名称不能为空',
					type: 'error'
				});
			}
			else if(form.name == ''){
				return this.$message({
					message: '客户名称不能为空',
					type: 'error'
				});
			}
			else if(form.projectSize == ''){
				return this.$message({
					message: '项目面积不能为空',
					type: 'error'
				});
			}
			else{
				let product = [];
				let p = {};
				for(let i = 0; i<this.data.length;i++){
					for(let b = 0; b < this.data[i].data.length; b++){
						p = {
							order_id: this.orderInfo.info.id,
							product_id: this.data[i].data[b].product_id,
							plan_num_1: this.data[i].data[b].a1.num,
							plan_num_2: this.data[i].data[b].a2.num,
							plan_num_3: this.data[i].data[b].a3.num,
							plan_num_4: this.data[i].data[b].a4.num,
							plan_num_5: this.data[i].data[b].a5.num,
							plan_price_1: this.data[i].data[b].a1.num * this.data[i].data[b].sellprice,
							plan_price_2: this.data[i].data[b].a2.num * this.data[i].data[b].sellprice,
							plan_price_3: this.data[i].data[b].a3.num * this.data[i].data[b].sellprice,
							plan_price_4: this.data[i].data[b].a4.num * this.data[i].data[b].sellprice,
							plan_price_5: this.data[i].data[b].a5.num * this.data[i].data[b].sellprice
						}
						product.push(p);
					}
				}
				let arr = {
					order_id: this.orderInfo.info.id,  // 方案ID
					template_id: this.template.id, // 方案模板ID
					ordername: form.name, // 方案名称
					kehudizhi: form.customerAds, // 客户地址
					kehuchenghu: form.customerName, // 客户称呼
					xitongmianji: form.projectSize,
					fanganriqi: form.projectDate,
					shejishi: this.userinfo.username,
					fangantotal1: this.temp.a1,
					fangantotal2: this.temp.a2,
					fangantotal3: this.temp.a3,
					fangantotal4: this.temp.a3,
					fangantotal5: this.temp.a5,
					righttype: form.radio,
					productList : product
				}
				console.log(arr);
				this.saverequest(arr);
			}
		},
		// 提交表单
		time(timestamp) {
			let date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			let Y = date.getFullYear() + '-';
			let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
			let D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
			let h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours())+ ':';
			let m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) + ':';
			let s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
			return Y+M+D+h+m+s;
		},
		// 转换时间
	}
}
</script>
<style lang="less" scoped>
.detail{
	.order-header{
		padding: 10px 0 20px;
		text-align: center;
		h3{
			position: relative;
			i{
				font-size: 16px;
				margin-left: 5px;
				position: absolute;
				top: 15px;
			}
			/deep/.el-input__inner{
				border: 0;
				border-radius: 0;
				text-align: center;
				font-size: 25px;
				background-color: rgba(0, 0, 0, 0);
				border-bottom: 1px solid #ddd;
			}
		}
		p{
			color: #888;
			margin-top: 10px;
		}
	}
	.btn{
		width: 500px;
		display: block;
		text-align: center;
		margin: 30px auto;
		display: flex;
		.el-dropdown,
		.el-button{
			flex: 1;
			width: 100%;
			margin: 0 2px;
			border-radius: 5px;
			border-color: #409EFF;
    		color: #409EFF;
		}
	}
	.info{
		border-radius: 0 0 8px 8px!important;
		ul{
			padding: 15px 0 15px;
			list-style: none;
			li{
				width: 50%;
				float: left;
				line-height: 40px;
				font-size: 14px;
				margin: -1px 0 0 -1px;
				border: 1px solid #333;
				display: flex;
				span{
					width: 100px;
					color: #333;
					display: block;
					flex-shrink: 0;
					text-align: center;
					border-right: 1px solid #333;
					background-color: #c7d3e6;
				}
				&:last-child{
					width: calc(100% - 1px);
				}
				/deep/.el-input__inner{
					border: 0;
					border-radius: 0;
				}
				/deep/.el-input-group__append{
					border: 0;
					background-color: #fff;
				}
			}
		}
	}
	.card{
		.card-header{
			height: 45px;
			line-height: 45px;
			font-weight: 700;
			color: #FA6400;
			cursor: pointer;
			user-select: none;
			.el-icon-arrow-right{
				transition: .3s;
				transform:rotate(0deg);
			}
			&.selected{
				.el-icon-arrow-right{
					transform:rotate(90deg);
				}
			}
		}
		.card-body{
			display: none;
			&.active{
				display: block;
			}
		}
	}
	table{
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
		tr,td,th{
			padding: 8px 10px;
			font-size: 14px;
			text-align: center;
			border: 1px solid #333;
		}
		thead{
			background-color: #c7d3e6;
		}
		.thumb{
			width: 100%;
			display: block;
		}
		.content{
			text-align: justify;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
		}
		.price{
			font-size: 12px;
		}
		.name{
			width: 150px;
			font-weight: 500;
			background-color: #c7d3e6;
		}
	}
	input.num{
		width: 30px;
		display: block;
		text-align: center;
		padding: 5px;
		border: 1px solid #eee;
		outline: none;
		border-radius: 3px;
		background-color: rgba(0,0,0,.05);
		box-shadow: 0 0 0 2px rgba(0, 0, 0, .05);
		&:focus{
			color: #FA6400;
			border-color: #FA6400;
			background-color: #fa64001e;
			box-shadow: 0 0 0 2px rgba(250,100,0, 0.25);
		}
	}
	input[type=number] {
		&::-webkit-outer-spin-button,
		&::-webkit-inner-spin-button {
			-webkit-appearance: none;
		}
		-moz-appearance: textfield;
	}
	.auth{
		margin: 15px 0;
		.el-radio-group{
			display: flex;
			.el-radio-button{
				flex: 1;
				display: block;
			}
			/deep/.el-radio-button__inner{
				width: 100%;
				display: block;
				border-radius: 0;
			}
		}
	}
	/deep/.el-radio-button__orig-radio:checked+.el-radio-button__inner{
		background-color: #333;
		border-color: #333;
	}
	/deep/.el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled){
		box-shadow: 0 0 2px 2px rgba(0, 0, 0, .05);
	}
	/deep/.el-radio-button__orig-radio:checked+.el-radio-button__inner{
    	box-shadow: -1px 0 0 0 #333;
	}
	.add{
		width: 100%;
		margin: 0 auto;
		display: block;
		border: 0;
		appearance:none;
		-moz-appearance:none;
		-webkit-appearance:none;
		/deep/.el-input__inner{
			border: 0;
		}
	}
}

</style>